const tool = require('../../tool');


// 表格初始化
var tableMakeInit = function (tableConfig, module_config) {

  var tableData = tableConfig.tableData;
  var tableOpt = tableConfig.tableOpt;

  var tableTplStr = require('../../template/table/table_tpl.js');

  //表格项
  var templateCodeTable = handleMakeTableItems(tableData);
  //表格按钮
  var tableOperationGroup = handleMakeTableOperation(tableOpt, tableConfig);
  //表格方法
  var tableMethodsObj = require('./table_methods');
  var tableDefaultMounted = tableMethodsObj.tableDefaultMounted;
  var tableDefaultMethods = tableMethodsObj.tableDefaultMethods(module_config, tableConfig);
  var {
    tableMethodsFirst,
    tableMethodsSecond
  } = tableMethodsObj.tableMethods(tableOpt, tableConfig, module_config);

  //组合表格
  tableModuleTpl = handleReplace(tableTplStr, {
    tableItemGroup: templateCodeTable,
    tableOperationGroup: tableOperationGroup,
  });

  // 搜索栏
  const handleGenerateSearch = require('./table_search');
  const searchObj = handleGenerateSearch(tableConfig);
  var searchConTpl = searchObj.searchConTpl;
  var {
    inputDataContent,
    dateMethodsContent,
    searchMethodFirst,
    searchMethodSecond,
    addBtnInSearchMethodFirst,
    addBtnInSearchMethodSecond,
  } = searchObj;

  //data 列表枚举展示
  var tableOptShowStr = "";
  tableOptShowStr += getTableOptsShow(tableConfig);

  //data设置的返回值
  var getTableDataMethods = require('./table_data.js');
  var {
    dataCodeStr,
  } = getTableDataMethods(tableConfig, module_config);

  var totalDataContent = "";
  totalDataContent += inputDataContent;
  totalDataContent += tableOptShowStr;
  totalDataContent += dataCodeStr,

    //添加搜索栏
    tableModuleTpl = searchConTpl + tableModuleTpl;
  //添加搜索栏的方法 搜索，新增等
  tableMethodsFirst += searchMethodFirst;
  tableMethodsFirst += dateMethodsContent;
  tableMethodsFirst += addBtnInSearchMethodFirst;

  tableMethodsSecond += searchMethodSecond;
  tableMethodsSecond += addBtnInSearchMethodSecond;

  //表格项
  function handleMakeTableItems(tableData) {
    var list = '';

    tableData.forEach((item, index) => {
      if (item.type == "normal") {
        var tableItemStr =
          `<el-table-column label="{{{itemTitle}}}" width="${item.itemWidth}">
          <template slot-scope="scope">
            {{ scope.row.{{{itemName}}} || '-'}}
          </template>
        </el-table-column>
        `;
        list += tableItemStr.replace(/{{{(.*?)}}}/g, (node, key) => {
          return {
            itemTitle: item.title,
            itemName: item.name,
          }[key];
        })
      } else if (item.type == 'opts') {
        list += `
        <el-table-column label="${item.title}" width="${item.itemWidth}" >
          <template slot-scope="scope">{{${item.showName}[scope.row.${item.name} + ''] || '-'}}</template>
        </el-table-column>
        `;
      } else if (item.type == 'innerCode') {
        var { innerCode } = item;
        list += `
          <el-table-column label="${item.title}" width="${item.itemWidth}" >
            <template slot-scope="scope"> ${innerCode}</template>
          </el-table-column>
        `;
      } else if (item.type == 'img') {
        var { title, name, widthVal } = item;
        list += `
          <el-table-column label="${item.title}" width="${item.itemWidth}"  >
            <template slot-scope="scope">
              <div 
                class="table-img-wrap flex"
                v-if="scope.row.${item.name}" 
                style="height: ${item.heightVal}px;">
                
            <el-image 
              :src="scope.row.${item.name}"
              :preview-src-list="[scope.row.${item.name}]"
              > 
            </el-image>
               
              </div>
              <div v-else>未上传图片</div>
            </template>
          </el-table-column>
        `;

        /* 

          div
                :data-url="scope.row.${item.name}"
                @click.stop="previewImgF({ imgUrl: scope.row.${item.name} })"

           <img
                  style="height: 100%;"
                  :data-urlArr="JSON.stringify([scope.row.${item.name}])"
                  class="table-img"
                  alt="图片"
                />

        */

        // 有放大功能的图片展示
        // list += `
        // <template slot-scope="scope">
        //   <img
        //     @click="handleViewPhoto"
        //     :data-urlArr="JSON.stringify([scope.row.itemImageUrl])"
        //     class="table-img"
        //     style="width: 100px; height: 61.8px;"
        //     :src="scope.row.itemImageUrl"
        //     alt="图片"
        //   />
        // </template>
        // `;
      }
    });
    return list;
  }

  //表格按钮
  function handleMakeTableOperation(tableOpt, tableConfig) {
    var list = `
      <el-table-column label="操作" width="{{{btnWidth}}}">
        <template slot-scope="scope">
          {{{btnItems}}} 
        </template>
      </el-table-column>
    `;
    // 所有按钮的类型 
    // 跳转类型 查看view 修改modify
    // 请求类型 删除del 修改状态changeState 启用 禁用
    var btnStr = '';  //按钮组
    var btnLen = "";

    if (tableConfig.tableOptLen) {
      btnLen = tableConfig.tableOptLen;
    } else {
      btnLen = tableOpt.length * 90;
    }

    tableOpt.forEach((item, index) => {
      if (item.type == 'view') {
        btnStr += `
      <el-button @click="handleView" type="primary" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
      } else if (item.type == 'modify') {
        btnStr += `
      <el-button @click="handleModify" type="primary" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
      } else if (item.type == 'del') {
        btnStr += `
      <el-button @click="handleDelete" type="warning" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
      } else if (item.type.includes('changeState')) {

        if (item.showCondition) {
          if (item.methodNameTag == 'Pass') {
            btnStr += `
      <el-button v-if="${item.showCondition}" type="primary" @click="handleChangeState${item.methodNameTag}" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
          } else if (item.methodNameTag == 'Reject') {
            btnStr += `
      <el-button v-if="${item.showCondition}" type="warning" @click="handleChangeState${item.methodNameTag}" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
          } else {
            btnStr += `
      <el-button v-if="${item.showCondition}" @click="handleChangeState${item.methodNameTag}" type="primary" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
          }
        } else {
          if (item.methodNameTag == 'Pass') {
            btnStr += `
            <el-button @click="handleChangeState${item.methodNameTag}" type="primary" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
          } else if (item.methodNameTag == 'Reject') {
            btnStr += `
            <el-button type="warning" @click="handleChangeState${item.methodNameTag}" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
          } else {
            btnStr += `
            <el-button @click="handleChangeState${item.methodNameTag}" type="primary" :data-id="scope.row.id" size="small">${item.text}</el-button>`;
          }

        }
      } else if (item.type.includes('sort')) {
        // var {  } = item;
        btnStr += `
          <el-button
            type="primary"
            @click="handleOpenBtnWrap"
            :data-id="scope.row.id"
            size="small"
            :class="'openSort' + scope.row.id"
          >调整排序</el-button>
          <div
            class="input-group hidden"
            style="display: inline-block;"
            :class="'sortWrap' + scope.row.id"
          >
            <input v-model="sortIndex" type="text" style="width: 60px;" />
            <el-button
              type="primary"
              @click="handleSort"
              :data-id="scope.row.id"
              size="small"
            >确定</el-button>
          </div>
        `;
      }
    });
    return handleReplace(list, {
      btnItems: btnStr,
      btnWidth: btnLen
    });
  }



  return {
    tableModuleTpl,  // table的模板部分
    tableDefaultMounted, //初始挂载代码
    tableDefaultMethods, //默认表格方法
    tableMethodsFirst,  //方法索引
    tableMethodsSecond, //集合中的具体方法
    totalDataContent, //输入框的绑定数据
  };

}

module.exports = tableMakeInit;

//列表展示枚举
function getTableOptsShow(tableConfig) {
  var optShowStr = "";
  var tableData = tableConfig.tableData;
  tableData.forEach((item, index) => {
    if (item.type == "opts") {
      optShowStr += `${item.showName} : ${item.showObj}, 
      `;
    }
  })
  return optShowStr;
}


//模板替换
function handleReplace(tpl, opt) {
  return tpl.replace(/{{{(.*?)}}}/g, (node, key) => {
    return opt[key];
  })
}
